<template>
  <div>
    <van-nav-bar :title="t('shiftoutTheWarehouse.shiftoutBySKU')" left-arrow @click-left="onClickLeft" placeholder fixed/>

    <van-form style="margin-top: 15vh">
      <scanning  @input="handleManualInputOriginalLocation" @keydownEnter="handleScan" ref="originalLocation" :placeholder="t('shiftoutTheWarehouse.originalLocation')" :isFocus="true"
                style="margin-bottom: 20px; height: 50px;"></scanning>
      <scanning @input="handleManualInputNewLocation" @keydownEnter="handleScanNewLocation" ref="newLocation" :placeholder="t('shiftoutTheWarehouse.newLocation')"
                style="height: 50px; margin-bottom: 20px"></scanning>
      <scanning @keydownEnter="handleScanSkuCode" ref="skuCode"  :placeholder="t('refundReceive.pleaseScanningSku')"
                 style="height: 50px" @input="handleManualInput"></scanning>
      <label for="numberInput" style="margin-top: 20px;">可用数量</label>
      <input disabled id="numberInput" type="number" v-model="numberValue" @input="updateNumber" style="height: 30px;width: 150px; margin-top: 15px;margin-left: 5px; display: inline-block; vertical-align: top;">

      <label for="numberInput1" style="margin-top: 20px;">移库数量</label>
      <input id="numberInput1" type="number" v-model="movingNumberValue" style="height: 30px;width: 150px; margin-top: 15px;margin-left: 5px; display: inline-block; vertical-align: top;">

      <div style="margin: 20px 7px; display: flex; justify-content: space-between;">
        <van-button block @click="reset">{{t('reset')}}</van-button>
        <van-button block type="primary" @click="submit" style="margin-left: 5px;">{{t('submit')}}</van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import Scanning from "@/views/components/Scanning/index.vue";
import { useI18n } from "vue-i18n";
import { postRequest, scanSuccess, scanFail } from "@/api";
import { AppToast } from "@/utils/appToast";
import { ref } from 'vue';
const { t } = useI18n();
let originalLocationCode = ref('');
let newLocationCode = ref('');
let skuCode = ref('');
let number = ref(null);
let numberValue = ref('');
let movingNumberValue = ref('');
let originalSkuCode =ref('');
let skuCodeValue = ref('');
const onClickLeft = () => history.back();
const handleScan = async code => {
  await postRequest(
      '/orderInfo/checkLocationExist',
      { locationCode: code }
  ).then(() => {
    scanSuccess()
    originalLocationCode.value = code;
  }, () => {
    scanFail()
    originalLocationCode.value = code;
  })
};
const handleScanNewLocation = code => {
  postRequest(
    '/orderInfo/checkLocationExist',
    { locationCode: code }
  ).then(() => {
    scanSuccess()
    newLocationCode.value = code;
  }, () => {
    scanFail()
    newLocationCode.value = code;
  })
};
const originalLocation = ref(null);
const newLocation = ref(null);
const reset = () => {
  originalLocation.value.setValue();
  newLocation.value.setValue();
};
const handleScanSkuCode = async code => {
  try {
    const response = await postRequest('/delivered/selectSkuNum', {
      skuCode: code,
      locationCode: originalLocationCode.value
    });
    scanSuccess();
    skuCode.value = code;
    originalSkuCode.value = code;
    numberValue.value=response.data
  } catch (error) {
    // 可以根据错误情况进行相应处理
  }
};
const updateNumber = () => {
  number.value = numberValue.value;
  console.log(skuCode.value)
};
// 处理原始库位码手动输入
const handleManualInputOriginalLocation = (event: Event) => {
  const inputElement = event.target as HTMLInputElement;
  const value = inputElement.value;
  originalLocationCode.value = value;
};
const handleManualInput = (event: Event) => {
  const inputElement = event.target as HTMLInputElement;
  const value = inputElement.value;
  // 仅去除首尾空格（可根据实际需求决定是否保留这步操作），不再进行大小写转换
  const formattedValue = value.trim();
  // 将手动输入并处理后的的值赋给skuCodeValue
  skuCodeValue.value = formattedValue;
  originalSkuCode.value = formattedValue;
};
// 处理新库位码手动输入
const handleManualInputNewLocation = (event: Event) => {
  const inputElement = event.target as HTMLInputElement;
  const value = inputElement.value;
  const formattedValue = value.trim();
  newLocationCode.value = formattedValue;
};
const submit = () => {
  if (true) {
    postRequest("/orderInfo/movingLocation", {
      containerCode: '',
      dimension: 'skuCode',
      fromTerminal: '1',
      locationCode: originalLocationCode.value,
      locationCodeNew: newLocationCode.value,
      modifiedUser: '',
      skuCode:originalSkuCode.value,
      skuNum: numberValue.value,
      movingSkuNum: movingNumberValue.value
    }).then(res => {
  	  console.log(res);
      if (!res.data || res.data.length === 0) {
        if (res.returnCode === 99999) {
          AppToast("", "fail");
          skuCode.value = originalSkuCode.value;
        } else if (res.returnCode === 10000) {
          AppToast("移库成功", "success");
          reset()
        }
        return;
      }
      AppToast(t("movingLocationSuccess"), "success");
    })
  }
};
</script>

<style scoped lang="less">
:deep(.van-cell) {
  font-size: 1rem;
}

:deep(.van-nav-bar__title) {
  font-size: 1rem;
  font-weight: 500;
  color: white;
}

:deep(.van-nav-bar__content) {
  background: #1b82d2;
}

:deep(.van-nav-bar .van-icon) {
  color: white;
}

:deep(.van-cell__label) {
  font-size: 1rem;
}
/* 确保输入框和扫描框高度一致且对齐 */
input[type="number"] {
  height: 50px;
  box-sizing: border-box;
}
label {
  display: inline-block;
  vertical-align: top;
}
</style>